<template>
  <div class="container">
    <!-- 面包屑 -->
    <div class="bread">
        <el-breadcrumb separator=">">
        <el-breadcrumb-item :to="{ path: '/' }">
            首页
        </el-breadcrumb-item>
        <el-breadcrumb-item>搜索</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <!-- 主体 -->
    <div v-masonry transition-duration="0.3s" item-selector=".item" column-width=".item" gutter="5"
    v-infinite-scroll="load"
    :infinite-scroll-disabled="disabled"
    >
        <!-- item-selector=".item"  ==> 类名中包含.item的DOM，都会被拉入瀑布流的布局 -->
    <div v-masonry-tile class="item" v-for="item in blocks" :key="item.id" >
        <!-- 你要渲染的图片啦，文字一类的代码块 -->
        <router-link :to="{ path: '/details', query: { url:item.url } }">
            <img :src="item.url" alt="" style="width: 25vw;margin-bottom: 5px;max-height: 50vw;">
        </router-link>
        <div class="text_box">
            <div class="author">北宋 赵佶</div>
            <div class="name">行书蔡行故卷全图</div>
        </div>
    </div>
    </div>
    <p v-if="loading" class="loading">Loading...</p>
    <p v-if="noMore" class="loading">No more</p>
  </div>

</template>

<script>
import { ref, computed, reactive } from 'vue'
import { searchList } from '@/api/search.js'
export default {
  name: 'lt-search',
  setup () {
    const blocks = reactive([
      {
        id: 1,
        url: 'https://g2.ltfc.net/view/SUHA/61436ee6a53b253225a3ac95'
      },
      {
        id: 2,
        url: 'https://g2.ltfc.net/view/SUHA/6221a96652c95d7fa000caf9'
      },
      {
        id: 3,
        url: 'https://g2.ltfc.net/view/SUHA/6221a96652c95d7fa000caf9'
      },
      {
        id: 4,
        url: 'https://g2.ltfc.net/view/SUHA/6221a96652c95d7fa000caf9'
      },
      {
        id: 5,
        url: 'https://g2.ltfc.net/view/SUHA/6221a96652c95d7fa000caf9'
      },
      {
        id: 6,
        url: 'https://g2.ltfc.net/view/SUHA/6221a96652c95d7fa000caf9'
      },
      {
        id: 7,
        url: 'https://g2.ltfc.net/view/SUHA/6221a96652c95d7fa000caf9'
      },
      {
        id: 8,
        url: 'https://g2.ltfc.net/view/SUHA/6221a96652c95d7fa000caf9'
      },
      {
        id: 9,
        url: 'https://g2.ltfc.net/view/SUHA/6221a96652c95d7fa000caf9'
      }
    ])
    const loading = ref(false)
    const searchlist = reactive([])
    const noMore = computed(() => blocks[8].id >= 10)
    const disabled = computed(() => loading.value || noMore.value)
    searchList().then(data => {
      searchlist.value = data.result
    })
    const load = () => {
      loading.value = true
      setTimeout(() => {
        // 调接口获取数据
        blocks.push({
          id: 14,
          url: 'https://g2.ltfc.net/view/SUHA/6221a96652c95d7fa000caf9'
        })
        loading.value = false
      }, 3000)
    }
    return { blocks, disabled, load, searchlist }
  }
}
</script>

<style scoped lang='less'>
.container {
    width: 76vw;
    margin: 0 auto;
    position: relative;
    .bread{
        margin: 1vw 0 1vw 0;
    }
    .item{
        margin-bottom: 5px;
    }
    .loading{
        display: flex;
        align-items: center;
        justify-content: center;
        height: 50px;
    }
    .text_box{
        height: 4vw;
        // text-align: center;
        line-height: 4vw;
        margin-bottom: 5px;
        .author {
            width: 20vw;
            height: 2vw;
            color: rgba(0,0,0,.45);
            font-weight: 400;
            font-size: 15px;
            font-family: PingFangSC-Regular,PingFang SC;
            line-height: 24px;
        }
        .name {
            width: 20vw;
            height: 2vw;
            margin-top: -5px;
            color: rgba(0,0,0,.65);
            font-weight: 800;
            font-size: 18px;
            font-family: SourceHanSerifCN-Heavy,SourceHanSerifCN;
            line-height: 24px;
        }
    }
}

</style>
